<template>
	<view class="">
		<!-- 自定义头部 -->
		<view class="header_nav">
			<view class="status_bar" :style="{height:recHeight+'px'}"></view><!-- 状态栏 -->
			<view class="header_title" :style="{height:titleBarHeight+'px',top:recHeight+'px',lineHeight:titleBarHeight +'px'}">
				<!-- 顶部导航栏 -->
				<view class="_font-18 _pos-rel _flex-row-mid" style="color: #101010;">
					<navigator open-type="navigateBack" class="_font-18 _pad-x-15 iconfont icon-zuo">
					</navigator>
					租车资质认证
				</view>
			</view>
			<view class="_w-max img" :style="{height:headerHeight+'px'}"></view>
		</view>
		<view class="_w-max" :style="{height:headerHeight+'px'}"></view>
		
		<view class="index _pad-x-10">
			<view class="up-image-box _mar-y-10 _pad-x-15">
				<view class="li-1 _pad-top-15">
					<view class="head">
						<view class="txt-1 _mar-bottom-5">上传本人身份证</view>
						<view class="txt-2">上传二代身份证照片，照片大小不超过5M</view>
					</view>
					<view class="up-image _mar-top-30">
						<view class="item" name="idCard-1" @click="upLoadIDcard_one()" style="position: relative;">
							<image class="_w-max" :src="Images.card_a" mode="widthFix" v-if="Images.card_a"></image>
							<text class="iconfont icon-guanbi1" style="color: #999;font-size: 50rpx;position: absolute;top: 0;right: 0;" @click="deleteImage(1)" v-if="Images.card_a"></text>
						</view>
						<view class="item" name="idCard-2" @click="upLoadIDcard_two()" style="position: relative;">
							<image class="_w-max" :src="Images.card_b" mode="widthFix" v-if="Images.card_b"></image>
							<text class="iconfont icon-guanbi1" style="color: #999;font-size: 50rpx;position: absolute;top: 0;right: 0;" @click="deleteImage(2)" v-if="Images.card_b"></text>
						</view>
					</view>
				</view>
				<view class="li-2 _mar-top-50">
					<view class="head">
						<view class="txt-1 _mar-bottom-5">上传本人驾驶证正副页</view>
						<view class="txt-2">上传驾驶证正副页照片，照片大小不超过5M</view>
					</view>
					<view class="up-image _mar-top-30">
						<view class="item" name="idCard-1" @click="upLoadDriveCard()" style="position: relative;">
							<image class="_w-max" :src="Images.car_cert" mode="widthFix" v-if="Images.car_cert"></image>
							<text class="iconfont icon-guanbi1" style="color: #999;font-size: 50rpx;position: absolute;top: 0;right: 0;" @click="deleteImage(3)" v-if="Images.car_cert"></text>
						</view>
						<!-- <view class="item" name="idCard-2"></view> -->
					</view>
				</view>
			</view>
			<view class="up-detail _pad-x-15">
				<view class="title">示例图</view>
				<image class="_w-max" src="https://uxcar.uxphp.net/uploads/attach/2023/08/20230824/ff4c3356626cb2b37607937fb1256a58.png" mode="widthFix"></image>
				<view class="_mar-top-15" style="color: #858585;">
					<view style="font-size: 28rpx;">
						<text class="iconfont icon-zhuyi-copy"></text>
						<text>拍摄说明:</text>
					</view>
					<view class="_flex-col" style="font-size: 24rpx;">
						<text class="_pad-bottom-5">
							请横向拍摄，照片上不要有阴影和反光，确保信息清晰，
							请保证驾驶证与身份证为同一人。
						</text>
					</view>
				</view>
			</view>
			<button class="sub-btn theme-color-bg" @click="upload_ok">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recHeight: '', //状态栏高度
				titleBarHeight: '', //顶部标题栏高度
				MenuButtonHeight: '', //小胶囊高度
				MenuButtonTop: '', //顶部距离
				headerHeight: '', //头部总高度
				shopsListTop: '',
				
				Images:{
					card_a:'',
					card_b:'',
					car_cert:''
				},
				disabled:false,
				imageIndex:0,
			}
		},
		onLoad(option) {
			if(option.Images){
				this.Images = JSON.parse(option.Images)
			}
			if(option.disabled == 'true'){
				this.disabled = true;
			}
			uni.hideTabBar();
			this.MenuButtonHeight = uni.getMenuButtonBoundingClientRect().height; //小胶囊高度
			this.MenuButtonTop = uni.getMenuButtonBoundingClientRect().top; //顶部距离
			this.getPhoneInfo();
		},
		onShow() {

		},
		methods: {
			// 删除
			deleteImage(index){
				if(index === 1){
					this.Images.card_a = '';
				}else if(index === 2){
					this.Images.card_b = '';
				}else if(index === 3){
					this.Images.car_cert = '';
				}
			},
			// 顶部导航栏 配置
			getPhoneInfo() {
				let that = this;
				//小程序 配置
				uni.getSystemInfo({
					success(res) {
						that.recHeight = res.statusBarHeight; //获取状态栏高度
						that.titleBarHeight = (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
						that.headerHeight = (res.statusBarHeight) + (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
					}
				})
				const query = uni.createSelectorQuery().in(that);
				query.select('.shops_search').boundingClientRect(data => {}).exec();
			},
			//上传身份证正面照片
			upLoadIDcard_one: function() {
				let that = this;
				// if(that.disabled){
				// 	return;
				// }
				that.$util.uploadImageOne('upload/image', (res) => {
					that.Images.card_a = res.data.url;
				});
			},
			//上传身份证反面照片
			upLoadIDcard_two: function() {
				let that = this;
				// if(that.disabled){
				// 	return;
				// }
				that.$util.uploadImageOne('upload/image', (res) => {
					that.Images.card_b = res.data.url;
				});
			},
			//上传驾驶证正副页
			upLoadDriveCard: function() {
				let that = this;
				// if(that.disabled){
				// 	return;
				// }
				that.$util.uploadImageOne('upload/image', (res) => {
					that.Images.car_cert = res.data.url;
				});
			},
			// 确定上传
			upload_ok() {
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1];
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.Images = this.Images;
				if(this.Images.car_cert!=''&&this.Images.card_a!=''&&this.Images.card_b!=''){
					uni.navigateBack({
						delta: 1
					})
				}else {
					return this.$util.Tips({
						title: '请上传完整信息'
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.header_nav {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;

		//顶部导航栏
		.status_bar {
			width: 100%;
			position: fixed;
			z-index: 9;
			background-color: #ffffff;
		}

		.header_title {
			width: 100%;
			position: relative;
			z-index: 999;
			background-color: #ffffff;
		}

		.img {
			position: absolute;
			top: 0;
			z-index: 10;
		}
	}
	.index{
		 width: 100%;
		 padding-bottom: 100rpx;
		 .up-image-box {
			width: 100%;
			height: 900rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			.li-1{
				.head {
					.txt-1 {
						color: #101010;
						font-size: 32rpx;
						font-weight: 600;
					}
					.txt-2 {
						color: #a9a9a9;
						font-size: 24rpx;
					}
				}
				.up-image {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.item {
						width: calc(100% / 2 - 20rpx);
						height: 220rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						&:first-child {
							background-image: url('https://uxcar.uxphp.net/uploads/attach/2023/08/20230824/4e9a1a71ba35144abd2c66f16a45b64d.png');
							background-size: 100% 100%;
							background-position: center center;
						}
						&:last-child {
							background-image: url('https://uxcar.uxphp.net/uploads/attach/2023/08/20230824/60d5f01da611a68ab658daea69934543.png');
							background-size: 100% 100%;
							background-position: center center;
						}
					}
				}
			}
			.li-2{
				.head {
					.txt-1 {
						color: #101010;
						font-size: 32rpx;
						font-weight: 600;
					}
					.txt-2 {
						color: #a9a9a9;
						font-size: 24rpx;
					}
				}
				.up-image {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.item {
						width: calc(100% / 2 - 20rpx);
						height: 220rpx;
						display: flex;
						align-items: center;
						// justify-content: center;
						overflow: hidden;
						&:first-child {
							background-image: url('https://uxcar.uxphp.net/uploads/attach/2023/08/20230824/a872062670f787ea564563ba22a0baa7.png');
							background-size: 100% 100%;
							background-position: center center;
						}
					}
				}
			}
		}
		.up-detail {
			width: 100%;
			height: 456rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			padding-top: 40rpx;
			.title {
				color: #101010;
				font-size: 32rpx;
				font-weight: 600;
			}
		}
		.sub-btn {
			margin: 0 auto;
			width: 652rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 200rpx;
			// background: linear-gradient(-88.58deg, rgba(98,98,98,1) -0.63%,rgba(75,73,75,1) 97.9%);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			text-align: center;
			margin-top: 24rpx;
		}
	}
</style>
